import {
    LikeFilled,
    LikeOutlined,
    LikeTwoTone,
    MessageOutlined,
    StarFilled,
    StarOutlined,
    StarTwoTone
} from '@ant-design/icons';
import {Avatar, List, message, Modal, Space} from 'antd';
import React, {useRef, useState} from 'react';
import {
    ControlBar,
    CurrentTimeDisplay,
    PlaybackRateMenuButton,
    Player,
    TimeDivider,
    VolumeMenuButton
} from "video-react";
import {like, queryVideoListByUserId, unLike, useFocus, useUnFocus} from "@/services/videoService";

interface Props {
    visible: boolean;
    // 视频数据
    data: VideoType.Video[];
    initData:(result:number,id:number)=>void;
    onClose: () => void;
}


/**
 * 自定义icon组件
 * @param icon
 * @param text
 * @param onClick
 * @constructor
 */
const IconText = ({icon, text, onClick}: { icon: React.FC; text: string; onClick: () => any }) => (
    <Space onClick={onClick}>
        {React.createElement(icon)}
        {text}
    </Space>
);


const VideoShowModal: React.FC<Props> = (props) => {
    let {visible, data, onClose,initData} = props;

    // 点击
    const doLike = async (hasLiked: number, id: number) => {
        let result:number = hasLiked;
        if (hasLiked === 0) {
             await like(id).then(res => {
                result = res.data;
            }).catch(e => {
                message.error(e.message)
            })
        } else {
            await unLike(id).then(res => {
                result = res.data;
            }).catch(e => {
                message.error(e.message)
            })
        }
        // 重新加载数据
        await initData(result,id)
    }

    return <Modal
        destroyOnClose={true}
        title="ta的视频秀"
        visible={visible}
        footer={null}
        onCancel={onClose}
        width={900}
    >
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
                // 分页查询
                onChange: (page) => {
                    console.log(page);
                },
                pageSize: 3,
            }}
            dataSource={data}
            renderItem={(item) => (
                <List.Item
                    key={item.id}
                    actions={[
                        <IconText icon={item.hasLiked == 0 ? LikeOutlined : LikeFilled}
                                  text={item.likeCount.toString()}
                                  onClick={() => {
                                     doLike(item.hasLiked, item.id)
                                  }}
                                  key="list-vertical-like-o"/>,
                    ]}
                    extra={
                        <Player
                            autoPlay={false}
                            playsInline='false'
                            src={item.videoUrl}
                            fluid={false}
                            height={150}
                            width={272}
                            poster={item.picUrl}
                        >
                            <ControlBar autoHide={false}>
                                <CurrentTimeDisplay order={4.1}/>
                                <TimeDivider order={4.2}/>
                                <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1}/>
                                <VolumeMenuButton/>
                            </ControlBar>
                        </Player>
                    }
                >
                    <List.Item.Meta
                        avatar={<Avatar src={item.userAvatar}/>}
                        title={<a>{item.userName}</a>}
                    />
                    {item.text}
                </List.Item>
            )}
        />
    </Modal>

};

export default VideoShowModal;